@extends("admin.index")

@section("title","新闻管理")

@section("css")
<link rel="stylesheet" href="/static/layui/css/layui.css">
{{--<link rel="stylesheet" href="/static/admin/css/bootstrapValidator.min.css">--}}
<style>
    #news-pic {
        width: 100px;
        height: 70px;
        border: 1px solid gainsboro;
        margin-left: 15px;
    }
</style>
@endsection

@section("content")

    <div class="page-inner">
        <div class="page-header">
            <nav class="breadcrumb">
                <div class="left row">
                    <li class="breadcrumb-item"><a href="#">产品管理</a></li>
                    <li class="breadcrumb-item active" aria-current="page">产品分类创建</li>
                </div>
                <div class="right row">
                    <li class="breadcrumb-item"><i class="fa fa-reply"></i></li>
                    <li class="breadcrumb-item active" aria-current="page"><i class="fa fa-refresh"></i> </li>
                </div>
            </nav>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <a href="{{route("admin.news.index")}}" class="btn btn-primary btn-sm btn-border">新闻列表</a>
                        </div>
                    </div>
                    <form action="{{route('admin.news.store')}}" method="post" id="defaultForm">

                        @include("admin.common.result")
                        @include("admin.common.validate")

                        @csrf
                        <div class="card-body">
                            <div class="form-group">
                                <label for="title">新闻标题</label>
                                <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题">
                            </div>
                            <div class="form-group">
                                <label for="keyword">关键字</label>
                                <input type="text" class="form-control" id="keyword" name="keyword" placeholder="请输入关键字">
                            </div>
                            <div class="form-group">
                                <label for="desc">描述</label>
                                <textarea class="form-control" name="desc" id="desc" rows="3"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="remark">摘要</label>
                                <textarea class="form-control" name="remark" id="remark" rows="3"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="views">浏览次数</label>
                                <input type="text" class="form-control" id="views" name="views" placeholder="请输入浏览次数">
                            </div>
                            <div class="form-group">
                                <label for="file">图片上传</label>
                                <div class="row">
                                    <img src="/static/admin/bootstrap/img/face-bg.png" id="news-pic">
                                    <input type="hidden" name="pic" id="pic">
                                    <div class="btn btn-secondary" id="pic-btn" style="height: 42px;margin-left: 20px;">上传图片</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="contents">新闻内容</label>
                                <textarea id="contents" name="contents" class="form-control" style="display: none;"></textarea>
                            </div>
                        </div>

                        <div class="card-action">
                            <button class="btn btn-success" type="submit">Submit</button>
                            <button class="btn btn-danger">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("script")
<script src="/static/layui/layui.js"></script>
<script src="/static/admin/bootstrap/js/bootstrapValidator.min.js"></script>
<script>
    var _token = "{{csrf_token()}}";
    var idea   = "news";//存储图片的目录名称
    layui.use(['layedit','upload'], function(){
        var layedit = layui.layedit;
        var upload  = layui.upload;
        layedit.build('contents',{
            tool: [
                'strong' //加粗
                ,'italic' //斜体
                ,'underline' //下划线
                ,'del' //删除线

                ,'|' //分割线

                ,'left' //左对齐
                ,'center' //居中对齐
                ,'right' //右对齐
                ,'link' //超链接
                ,'unlink' //清除链接
                ,'face' //表情
                // ,'image' //插入图片
                // ,'help' //帮助
            ],
            height: 180 //设置编辑器高度
        }); //建立编辑器

        upload.render({
            elem: '#pic-btn' //绑定元素
            ,url: '{{route("admin.upload.store")}}' //上传接口
            ,data: {_token,idea}
            ,done: function(res){
                if(res.status === 200){
                    $("[name='pic']").val(res.data);
                    $("#news-pic").attr("src",res.data);
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    $('#defaultForm').bootstrapValidator({
//        live: 'disabled',
        message: '输入的内容无效',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            title: {
                validators: {
                    notEmpty: {
                        message: '新闻标题不可为空'
                    },
                    //长度规则
                    stringLength: {
                        min: 2, //最小值
                        max: 16,//最大值
                        message: '新闻标题的长度在2~16位'
                    },
                }
            },
            keyword: {
                validators: {
                    //长度规则
                    stringLength: {
                        max: 10,//最大值
                        message: '关键词的长度在0~10位'
                    },
                }
            },
            desc: {
                validators: {
                    //长度规则
                    stringLength: {
                        max: 100,//最大值
                        message: '描述的长度不超过100'
                    },
                }
            },
            remark: {
                validators: {
                    //长度规则
                    stringLength: {
                        max: 100,//最大值
                        message: '摘要的长度不超过100'
                    },
                }
            },
            views: {
                validators: {
                    notEmpty: {
                        message: '浏览次数为必填项'
                    },
                    digits :{
                        message: '浏览次数为数值'
                    }
                }
            },
            contents: {
                validators: {
                    notEmpty: {
                        message: '新闻内容为必填项'
                    }
                }
            },
        }
    });
</script>
@endsection
